<template>
  <div class="number-input">
    <div class="vux-x-input weui-cell vux-tap-active" style="border: 1px #e5e5e5 solid;" @click="openKeyboard">
      <div class="weui-cell__hd">
      </div>
      <div class="weui-cell__bd weui-cell__primary" style="width: 100%;overflow: hidden;">
        <div class="weui-input weui-input-rtl" >
          <span v-if="!value" class="placeholder">{{ placeholder }}</span>
          <span style="text-fill-color: #000;">{{ value }}</span>
        </div>
      </div>
      <div class="weui-cell__ft" style="color: #000;">
        <div>{{ unit }}</div>
      </div>
    </div>

    <number-keyboard
      :value="value"
      :unit="unit"
      :show="keyboard"
      theme="custom"
      :close-button-text="$t('confirm')"
      :extra-key="type === 'float' ? '.' : ''"
      :z-index="600"
      :showInputNumber="false"
      @blur="onBlur"
      @input="onInput"
      @delete="onDelete"
      @close="onClose"
    ></number-keyboard>
  </div>
</template>

<script>
import NumberKeyboard from '@/components/NumberKeyboard'

export default {
  props: {
    placeholder: String,
    unit: String,
    type: {
      type: String,
      default: 'float',
      validator(value) {
        return ['float', 'int', 'mobile'].indexOf(value) !== -1
      }
    },
    value: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      values: [],
      keyboard: false
    }
  },
  watch: {
    value: {
      handler (val) {
        const _value = val + ""
        this.values = _value.split("")
      },
      immediate: true
    },
    values(nv) {
      const _value = nv.join("")
      this.$emit('input', _value)
    }
  },
  methods: {
    openKeyboard() {
      if (!this.keyboard)
        this.keyboard = true
    },
    onBlur() {
      this.keyboard = false
    },
    onInput(value) {
      // 拷贝当前的输入值
      const values = this.values.slice(); 

      // 检查输入的值是否为有效数字，并处理自动补0的情况
      const isValid = this.isValidInput(values, value);
      // 输入无效
      if (!isValid) {
        return false; 
      }

      values.push(value);
      
      // 处理以小数点开头的情况，自动补0
      if (values[0] === '.') {
        values.unshift(0)
      }

      // 处理前导0的情况
      if (values[0] == 0 && values.length > 1 && values[1] !== '.') {
        values.shift(); // 移除前导0
      }

      this.values = values;
    },
    isValidInput(values, newValue) {
      let currentInput = values.join('') + newValue;

      // 禁止多个前导零
      // if (/^0\d+/.test(currentInput)) {
      //   return false;
      // }

      // 允许一个小数点，但不能多于一个
      if (newValue === '.' && values.includes('.')) {
        return false;
      }

      // 检查小数点后的数字位数，限制最多两位小数
      const [integerPart, decimalPart] = currentInput.split('.');
      if (
        (integerPart && integerPart.length > 10) || 
        (decimalPart && decimalPart.length > 2)
      ) {
        return false;
      }

      return true; // 通过所有检查，输入有效
    },
    onDelete() {
      this.values.pop()
    },
    onClose() {
      const values = this.values
      let currentInput = values.join('');

      // 去除以 `0.` 结尾的 `.`
      if (currentInput.endsWith('.')) {
        currentInput = currentInput.slice(0, -1);
      }

      // 去除类似 `99.00` 和 `99.0` 中的多余小数点及后面的 `0`
      if (currentInput.includes('.')) {
        currentInput = parseFloat(currentInput).toString();
      }

      this.values = currentInput.split('')
    }
  },
  components: {
    NumberKeyboard
  }
}
</script>

<style scoped>
[dir=rtl] .weui-input-rtl {
  direction: ltr;
  text-align: right;
}

.weui-cell {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.placeholder {
  color: #888 !important;
}
</style>



